<template>
    <pageLayoutContent>
        <div class="form">
            <a-tree-select
                    style="width: 132px"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="institutionsTree"
                    allowClear
                    @change="fromChange"
                    placeholder="机构"
                    tree-default-expand-all
            ></a-tree-select>
            <i class="mp"></i>
            <a-select placeholder="报警类型" allowClear style="width: 132px"  @change="fromChange">
                <a-select-option :value="item.value" v-for="(item, key) in alarmType" :key="key">
                    {{item.label}}
                </a-select-option>
            </a-select>
            <i class="mp"></i>
            <a-date-picker allowClear  @change="fromChange" style="width: 132px"/>
        </div>
        <pageTable :columns="columns"
                   ref="pageTable"
                   :api="alarmRecord"/>
        <a-modal v-model="dealWith" title="处理" @ok="dealWithSubmit" :confirm-loading="confirmLoading">
            <a-alert message="请输入处理方式" style="margin: 0 0 15px 0 ;" type="error" show-icon v-if="dealWithErrVisible"
                     closable
                     :after-close="() => dealWithErrVisible = false" />
            <a-textarea placeholder="请输入处理方式" allow-clear v-model="handling"/>
        </a-modal>
    </pageLayoutContent>
</template>
<script>
    function style({alarmContent, isHandling}, isBtn) {
        if (isBtn) {
            return isHandling ? {
                'pointer-events': 'none',
                color: '#a6a6a6',
            } : {}
        }
        if ([0, 1].indexOf(alarmContent) > -1){
            return {
                color: '#e33c64'
            }
        }
        if ([2, 3].indexOf(alarmContent) > -1) {
            return {
                color: '#000'
            }
        }
        return {
            color: '#a6a6a6',
        }
    }
    import {alarmRecord} from "@/services/monitoring";
    import pageTable from "@/components/pageTable/pageTable";
    import pageLayoutContent from "@/components/pageLayoutContent";
    import {alarmType} from '@/config/configuration'
    import {institutionsList} from "@/services/institutions";

    export default {
        components: {
            pageTable,
            pageLayoutContent
        },
        data() {
            const columns = [
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                    width: 100,
                    style,
                    ellipsis: true,
                    fixed: 'left'
                },
                {
                    title: '报警内容',
                    style,
                    dataIndex: 'content',
                    width: 300,
                    key: 'content',
                    render: 'alarmContent',
                },
                {
                    title: '联系方式',
                    dataIndex: 'phone',
                    style,
                    key: 'phone',
                    width: 150
                },
                {
                    title: '紧急联系人',
                    style,
                    dataIndex: 'contact',
                    key: 'contact',
                    width: 250,
                    render: 'contactRows',
                },
                {
                    title: '处理方式',
                    style,
                    dataIndex: 'handling',
                    width: 300,
                    key: 'handling',
                    render: 'isHandling'
                },
                {
                    title: '操作',
                    key: 'id',
                    fixed: 'right',
                    width: 200,
                    render: 'btn',
                    btn: [
                        {
                            label: '忽略', event: this.ignoreAlarmRecord, style: (r) => style(r, true)
                        },
                        {
                            label: '处理', event: this.showDealWith, style: (r) => style(r, true)
                        },
                        {
                            label: '历史数据', event: this.viewData
                        },
                    ]
                },
            ];
            return {
                alarmType,
                columns,
                handling: '',
                institutionsTree: [],
                dealWithData: null,
                confirmLoading: false,
                dealWithErrVisible: false,
                dealWith: false,
                tableLoading: false,
            };
        },
        created() {
            this.initOption()
        },
        methods: {
            viewData() {
                this.$router.push({
                    path: `/UserManagement/dataMonitoring/data/1`,
                    query: {
                        tab: 3
                    }
                })
            },
            initOption() {
                institutionsList().then(({data}) => {
                    this.institutionsTree = data.list;
                })
            },
            alarmRecord,
            // 忽略
            ignoreAlarmRecord(record) {
                console.log(record);
                let _this = this;
                this.$confirm({
                    title: '确定忽略此次报警记录吗?',
                    content: '用户可能需要救助，请谨慎操作！',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                        }).then(() => {
                            _this.$message.success('忽略成功！');
                            _this.$refs['pageTable'].requestData();
                        }).catch(() => {
                            _this.$message.error('忽略失败！')
                        });
                    },
                    onCancel() {},
                });
            },
            showDealWith(record) {
                console.log(record);
                this.dealWithData = record;
                this.dealWith = true;
            },
            // 处理
            dealWithSubmit() {
                if (this.handling === '') {
                    this.dealWithErrVisible = true;
                    return;
                }
                this.dealWithErrVisible = false;
                this.confirmLoading = true;
                setTimeout(() => {
                    this.dealWith = false;
                    this.confirmLoading = false;
                    this.$message.success('处理成功！');
                    this.$refs['pageTable'].requestData();
                }, 2000);
            },
            fromChange(value) {
                console.log(value);
                this.$refs['pageTable'].requestData();
            },
        }
    };
</script>
<style lang="less">
    .form {
        height: 51px;
        border-bottom: 1px #e8e8e8 solid;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 15px;

        .mp {
            margin-left: 15px;
        }
    }

    .alarmRecord-table {
        margin: 0 0 0 18px;
    }


    .record-content {
        p {
            margin: 0;
            padding: 0;
        }
    }

    .ant-table-body {
        overflow: auto !important;
    }
</style>
